<template>
    <div class="page wos-flex wos-flex-center">
        <div id="login">
            <div class="logo wos-align-center">
                <img
                        src="../assets/images/logo.png"
                        alt="LOGO"
                        @click="getVersion"
                >
                <a-divider>{{ $lang.title }}</a-divider>
            </div>

            <a-input placeholder="请输入用户名" v-model="userName" ref="userName" size="large">
                <a-icon slot="prefix" type="user"/>
                <a-icon v-if="userName" slot="suffix" type="close-circle" @click="emitEmpty('userName')"/>
            </a-input>

            <a-input class="page-si" placeholder="请输入密码" type="password" v-model="passWord" ref="passWord" size="large">
                <a-icon slot="prefix" type="lock"/>
                <a-icon v-if="passWord" slot="suffix" type="close-circle" @click="emitEmpty('passWord')"/>
            </a-input>

            <div class="wos-align-right page-si">
                <a-switch checkedChildren="记住用户名" unCheckedChildren="临时登录" default-checked/>
            </div>

            <a-button class="page-si" type="primary" block @click="login()" :loading="LOADING">登录系统</a-button>

            <div class="wos-align-center page-si">
                <a href="#">找回密码</a>
            </div>

            <div class="copyright">
                copyright &copy; XinDongTech.com Version:{{version}} GIT:
                <a href="https://gitee.com/dushu/XDFE" target="_blank">XDFE</a>
            </div>
        </div>

    </div>
</template>

<script>
    import {mapState} from "vuex"

    export default {
        name: "Login",
        data() {
            return {
                userName: 'admin',
                passWord: 'admin'
            }
        },
        methods: {
            async login() {
                let result = await this.$service.sys.login({
                    userName: this.userName,
                    passWord: this.passWord
                })
                result === true
                    ? await this.$router.push({name: 'home'})
                    : this.loginErr(result)
            },
            loginErr(alertStr) {
                this.$message.warning( alertStr )
            },
            async getVersion() {
                let result = await this.$service.sys.version({
                    who: 'wos'
                })
                console.log("result:", result)
            },
            //清空用户名
            emitEmpty(ref) {
                this.$refs[ref].focus()
                this[ref] = ''
            }
        }
    }
</script>

<style scoped lang="less">
    @import '../assets/css/rule.less';

    .page {
        height: 100vh;
        width: 100vw;
        background-color: #161D2D;
        background-image: url("../assets/images/loginbg.jpeg");
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center;
    }

    #login {
        min-width: 300px;
        max-width: 33vw;
        border: 1px solid @gray;
        border-radius: 10px;
        padding: 40px 20px;
        background-color: #FFFFFF;
        -moz-box-shadow: 2px 2px 5px 2px @gray;
        -webkit-box-shadow: 2px 2px 5px 2px @gray;
        box-shadow: 2px 2px 5px 2px @gray;

        .logo {
            img {
                width: 5vw;
                height: 5vw;
            }

            p {
                padding-top: @padding-md;
                font-size: @font-size-sm;
            }
        }
    }

    .page-si {
        width: 100%;
        margin-top: @si*2;
    }

    .copyright {
        position: absolute;
        margin-top: 50px;
    }
</style>